<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Enumeration,java.util.ArrayList,java.util.HashMap,java.util.HashSet" %>
<%@ page import="cn.edu.nju.ws.aquila.query.Relation,cn.edu.nju.ws.aquila.user.User" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Construct relation</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/construct_relation.css" />
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/construct_relation.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<body>
	<div id="wrapper">
			<div id="top">
				<div id="user">
					welcome,<span id="userName"><%=session.getAttribute("user")%></span>
				</div>
				<div id="navigation-bar"><a href='main_datasource.jsp' class="nav-title">Datasource</a><a href='main_relation.jsp' class="nav-title">Relation</a><a href='main_query.jsp' class="nav-title">Query</a><a href='logout' class="nav-title">Logout</a></div>
				<div class="mspacing"></div>
				<div  class="operation">
					Construct a new relation
				</div>
			</div>
			<div class="mspacingLittle"></div>
			<div id="main">
				<div id="content-main">
					<form class="relative">
						<div>
							<span class='mtitle'>Name</span>&nbsp;<input type="text" name="relationName"/>
						</div>
						<div>
							<p class="relative"><span class='mtitle'>Arguments</span>
							<span id="editArgs">
								  <a href="#" id="addArg">Add</a>&nbsp;&nbsp;
								  <a href="#" id="removeArg">Remove</a>
						  </span>
							</p>
							<div id="argOrder">
								 <div class="mbutton"><input type="button" value="Up" name="up" style="width:40px"/></div>
								 <div class="mbutton"><input type="button" value="Down" name="down" style="width:40px"/></div>
							</div>
							<table border="1" id="argsTable">
								<tr>
									<th colspan="2">Name</th>
									<th>Type</th>
								</tr>
								<tr>
									<td><input type="checkbox" name="argsCheckbox" /></td>
									<td><input type="text" class="arg" maxlength=20/></td>
									<td>
										<select>
											<option value="literal">literal</option>
											<option value="uri">URI</option>
										</select>
									</td>
								</tr>
								<tr>
									<td><input type="checkbox"  name="argsCheckbox"/></td>
								<td><input type="text" class="arg" /></td>
									<td>
										<select>
											<option value="literal">literal</option>
											<option value="uri">URI</option>
										</select>
									</td>
								</tr>
							</table>
						</div>
						<div>
							<p class='mtitle'>Description</p>
							<textarea id="description"></textarea>
						</div>
						<div id="ruleList">
							<p class="relative mtitle">Rules<a href="#" class="add_rule"><span class="addRule"></span></a></p>					
							<hr align="left" class="hr" />
						</div>
					</form>
				<hr class="hr" align="left"/>
				<input type="button" value="ok" class="submitIdentify" onclick="submitRelation()"/>
				</div>
			</div>
		</div>
	<div class="hidden">
		<div id="bodyLiteral" title="Add a literal">
			<div class='operator'>
				<span class='option selected' title='select'><a href='#'>select</a>
				</span><span class='option unselected' title='search'><a href='#'>search</a>
				</span>
			</div>
			<hr />
			<div id="plane" class='plane'></div>
		</div>
		<div class="relationList">
			<h3>My relations</h3>
			<ul>
				<%
					String user = (String) session.getAttribute("user");
					ArrayList<Integer> constructedRelations = Relation.getRelationsOfAuthor(user);
					for (int relationId : constructedRelations) {
						int arity = Relation.getArity(relationId) ;
						String name  = Relation.getName(relationId);
						String alias = null;
						alias = Relation.getRelationAliasByUser(user,relationId) ;
						if(alias!=null)
							name = alias;
				%>
				<li><p>
						<span type="user" class="user" arity ="<%=arity%>" datatypeid="<%=relationId%>"><%=name%></span>
					
					<a class="importButton" href="#">
						select
					</a></p></li>
				<%
					}
				%>
			</ul>
			<h3>Imported relations</h3>
			<ul id="importeddsList">
				<%
					ArrayList<Integer> importedDatasets = Relation.getImportedRelationIdByUser(user);
					for (int relationId : importedDatasets) {
						int arity = Relation.getArity(relationId) ;
						String name  = Relation.getName(relationId);
				%>
				<li><p>
						<span type="user" class="user" arity ="<%=arity%>" datatypeid="<%=relationId%>"><%=name%></span>
					<a class="importButton" href="#">
						select
					</a></p></li>
				<%
					}
				%>
			</ul>
		</div>
		<div id="headLiteral" title="Edit head literal"></div>
	</div>
	<div id="footer"></div>
</body>
</html>